import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css'
import '../css/index.scss'
import { Table, Button, Select, Space, Modal, Form, Switch, Input, message,DatePicker,InputNumber } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

export default function Add(props) {
    const {adds,addsclose} = props
    const layout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
    };
    const onFinish = (values) => {
        console.log(values);
    };
    // 表单验证
     const validateMessages = {
        required: '这是必填项哦',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label}必须大于${min}小于${max}',
        },

    };
    // 日期选择器
    const { RangePicker } = DatePicker;
    function onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    }

    function onOk(value) {
        console.log('onOk: ', value);
    }
    const see = () => {
        
    }
    // 提交数据
    const [form] = Form.useForm();
    const onCheck = async () => {
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
            addsclose()
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };
    return (
        <div>
            <Form {...layout} name="nest-messages"
                onFinish={onFinish}
                form={form}
                validateMessages={validateMessages}
            >
                <Form.Item name='couponName' label="广告名称" rules={[{ required: true }]}>
                    <Input placeholder="请输入广告名称" />
                </Form.Item>
                <Form.Item name='couponName2' label="广告位置" rules={[{ required: true }]}>
                    <Input placeholder="请输入广告位置" />
                </Form.Item>
                <Form.Item name='selects' label="时间"  >
                <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onChange}
                        onOk={onOk}
                        locale={locale}
                    />
                </Form.Item>
                <Form.Item name='couponName3' label="当前状态" valuePropName="checked">
                <Switch checkedChildren="是" unCheckedChildren="否" defaultChecked/>
                </Form.Item>
                <Form.Item name='couponName4' label="点击次数"  rules={[{ type: 'number',required: true}]}>
                    <InputNumber placeholder="请输入点击次" style={{ width: '100%' }}/>
                </Form.Item>
                <Form.Item name='couponName5' label="生成订单" rules={[{ type: 'number',required: true}]}>
                    <InputNumber placeholder="请输入生成订单" style={{ width: '100%' }}/>
                </Form.Item>
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                    <Button type="primary" htmlType="submit" onClick={onCheck}>
                        提交
                    </Button>
                </Form.Item>
            </Form>

        </div>
    )
}
